<template>
    <view class="app">
        <view class="price-box">
            <text>支付金额</text>
            <text class="price">{{orderInfo.order_amount}}</text>
        </view>

        <view class="pay-type-list" v-if="orderInfo.order_status_code==='WAITPAY'">
            <view class="type-item b-b" v-for="(item,index) in payway" :key="index" @click="changePayType(item)">
                <text class="icon yticon" :class="item.icon"></text>
                <view class="con">
                    <text class="tit">{{item.name}}</text>
                    <text>推荐使用微信支付</text>
                </view>
                <label class="radio">
                    <radio value="" color="#fa436a" :checked='payType == item.code'></radio>
                </label>
            </view>
        </view>

        <text class="mix-btn" @click="pay" v-if="orderInfo.order_status_code==='WAITPAY'">确认支付</text>
        <text class="mix-btn" v-else>{{orderInfo.order_status_desc}}</text>
    </view>
</template>

<script>
  import { getOrderDetail, getPayWay, wxPay } from '@/api/order'
  import {
    mapMutations,
  } from 'vuex'

  export default {
    data () {
      return {
        payType: '',
        order_id: 0,
        orderInfo: {},
        payway: [],
        currentPay: {},
      }
    },
    computed: {},
    async onLoad (options) {
      this.order_id = options.order_id
      if (this.order_id <= 0) {
        this.server.msg('订单不存在')
        return
      }
      await this.getOrderDetail()
      if (this.server._isEmpty(this.orderInfo)) {
        this.server.msg('订单不存在')
        return
      }
    },

    methods: {
      ...mapMutations(['login']),
      //选择支付方式
      async getOrderDetail () {
        uni.showLoading({
          title: '正在加载',
        })
        this.orderInfo = (await getOrderDetail({id: this.order_id})).result
        let data = (await getPayWay()).result
        if (!data instanceof Array) {
          data = []
        }
        this.payway = data
        this.payway.forEach(item => {
          item.icon = 'icon-' + item.code
        })

        if (this.payway.length > 0) {
          this.payType = this.payway[0].code
          this.currentPay = this.payway[0]
        }
        uni.hideLoading()
        console.log(this.payway)
      },

      pay () {
        if (this.server._isEmpty(this.currentPay)) {
          this.server.msg('请选择支付方式')
          return
        }
        let that = this
        getOrderDetail({id: this.order_id}, function (res) {
          if (parseInt(res.data.status) !== 1) {
            that.server.msg(res.data.msg)
            return
          }
          that.orderInfo = res.data.result
          if (that.server._isEmpty(that.orderInfo)) {
            that.server.msg('订单不存在')
            return
          }
          if (that.orderInfo.order_status_code !== 'WAITPAY') {
            that.server.msg('订单不能进行支付')
            return
          }
          if (that.currentPay.code === 'alipay') {
            that.server.msg('暂时不支持支付宝支付')
            return
          }
          that.dopay()

        })

      },
      dopay () {
        let that = this
        if (this.server._isEmpty(this.server.getOpenId())) {
          uni.login({
            provider: 'wechat',
            success: function (loginRes) {
              if (that.server._isEmpty(loginRes.code)) {
                return
              }
              wxPay({code: loginRes.code, order_id: this.order_id}, function (result) {
                if (parseInt(result.data.status) !== 1) {
                  that.server.msg(result.data.msg)
                  return
                }
                let data = result.data.result
                that.login(data.user)
                let pay = data.pay
                if(pay.result_code!=="SUCCESS"){
                  that.server.msg("发起支付失败")
                  return
                }
                uni.requestPayment({
                  provider: 'wxpay',
                  timeStamp: pay.timeStamp.toString(),
                  nonceStr: pay.nonce_str,
                  package: pay.package,
                  signType: 'MD5',
                  paySign: pay.sign,
                  success: function (res) {
                    that.server.msg("支付成功")
                    uni.navigateTo({
                      url: `/pages/money/paySuccess`,
                    })
                  },
                  fail: function (err) {
                    that.server.msg("支付失败")
                  },
                })
              })
            },
          })
        } else {
          wxPay({openid: this.server.getOpenId(), order_id: this.order_id}, function (result) {
            if (parseInt(result.data.status) !== 1) {
              that.server.msg(result.data.msg)
              return
            }
            let data = result.data.result
            let pay = data.pay
            if(pay.result_code!=="SUCCESS"){
              that.server.msg("发起支付失败")
              return
            }
            uni.requestPayment({
              provider: 'wxpay',
              timeStamp: pay.timeStamp.toString(),
              nonceStr: pay.nonce_str,
              package: pay.package,
              signType: 'MD5',
              paySign: pay.sign,
              success: function (res) {
                that.server.msg("支付成功")
                uni.navigateTo({
                  url: `/pages/money/paySuccess`,
                })
              },
              fail: function (err) {
                that.server.msg("支付失败")
              },
            })
          })
        }
      },

      changePayType (item) {
        this.payType = item.code
        this.currentPay = item
      },
      //确认支付
      confirm: async function () {
        uni.redirectTo({
          url: '/pages/money/paySuccess',
        })
      },
    },
  }
</script>

<style lang='scss'>
    .app {
        width: 100%;
    }

    .price-box {
        background-color: #fff;
        height: 265upx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 28upx;
        color: #909399;

        .price {
            font-size: 50upx;
            color: #303133;
            margin-top: 12upx;
            &:before {
                content: '￥';
                font-size: 40upx;
            }
        }
    }

    .pay-type-list {
        margin-top: 20upx;
        background-color: #fff;
        padding-left: 60upx;

        .type-item {
            height: 120upx;
            padding: 20upx 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 60upx;
            font-size: 30upx;
            position: relative;
        }

        .icon {
            width: 100upx;
            font-size: 52upx;
        }
        .icon-unionpay {
            color: #fe8e2e;
        }
        .icon-erjiye-yucunkuan {
            color: #fe8e2e;
        }
        .icon-weixin {
            color: #36cb59;
        }
        .icon-alipay {
            color: #01aaef;
        }
        .tit {
            font-size: $font-lg;
            color: $font-color-dark;
            margin-bottom: 4upx;
        }
        .con {
            flex: 1;
            display: flex;
            flex-direction: column;
            font-size: $font-sm;
            color: $font-color-light;
        }
    }

    .mix-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 630upx;
        height: 80upx;
        margin: 80upx auto 30upx;
        font-size: $font-lg;
        color: #fff;
        background-color: $base-color;
        border-radius: 10upx;
        box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
    }

</style>
